.P-campaign{
	&Edit {

		&Form {
			// position: relative;
		}

		&LiteForm {
			// margin-bottom: 80px;
		}


		&Header {

		}

		&Tab{
			position: fixed;
			right: 0px;
			top: 60px;
			z-index: 100;
			background-color: #fff;
			border-radius: 8px;
			border: 1px solid #ececec;
			border-right: none;
			border-bottom-right-radius: 0;
			border-top-right-radius: 0;
			width: 180px;

			.headList {

				text-align: right;
				padding: 10px;
				li {
					display: inline-block;
					margin: 0 10px;
					&.act {
						// line-height: 22px;
						// border: 4px solid #0F233B;
						// background: #58AEDD;
						// border: 4px solid #73c04e;
						.headType {
							background: #2FAEEB;
							color: #fff;
						}
					}
				}
				.headType {
					display: block;
					margin: 0 auto;
					// background-color: #0F233B;
					background-color: #e6e6e6;
					height: 22px;
					width: 22px;
					line-height: 23px;
					text-align: center;
					font-size: 13px;
					font-weight: 600;
					font-family: Arial;
					font-style: normal;
					color: #c6c6c6;
					text-indent: -1px;
					-webkit-border-radius: 50%;
					-moz-border-radius: 50%;
					border-radius: 50%;
					cursor: pointer;
				}
				.headText {
					display: block;
					text-align: center;
					padding: 0 8px;
					line-height: 25px;
					font-size: 12px;
					color: #000;
					white-space: nowrap;
					// font-weight: 600;
					cursor: pointer;
				}

			}
			.flowEstimate{
				color: #555;
				border-top: 1px #ececec solid;
				padding: 10px;
				position: relative;
				span {
					vertical-align: middle;
					display: inline-block;
					font-size: 13px;
				}
				strong{
					color: #2FAEEB;
					font-weight: normal;
					vertical-align: middle;
					display: inline-block;
					font-size: 20px;
				}
				button{
					height: 30px;
					padding: 0 9px;
					vertical-align: top;
					min-height: 25px;
					line-height: 25px;
					border-radius: 4px;
					width: 30px;
					background: none;
					font-size: 13px;
					border: 1px solid #ececec;
					background: none;
					color: #a4a4a4;
					position: absolute;
					right: 10px;
					top: 8px;

					&:focus {
						outline: 0;
					}
					&:hover{
						background-color: #f5f5f5;
					}

					i {
						-webkit-transform: rotate(314deg);
						-moz-transform: rotate(314deg);
						transform: rotate(314deg);
						display: inline-block;
						font-size: 16px;
						position: absolute;
						left: 50%;
						top: 50%;
						margin-left: -8px;
						margin-top: -7px;
					}
				}
				&Tip {
					// border-top: none;
					>div {
						margin-bottom: 8px;
						font-weight: bold;
						font-size: 14px;
					}
					>span {
						color: #aaa;
						font-size: 12px;
						line-height: 16px;
					}
				}
				&TipButton{
					font-size: 18px;
					cursor: pointer;
					border-top: 1px #ececec solid;
				}
			}

			&.scrollStatus {
				top: 0px;
			}

			.step{
				margin: 20px;
				li {
					font-size: 14px;
					margin: 10px 0;
					cursor: pointer;
				}
			}

		}
		&Body {

			&Content {
				width: 100%;
				height: 100%;
			}
			&Inner {
				padding: 18px 0;
			}
			.exchangeErrorTip{
				color: #CE4040;
			}
			.channelName{
				font-size: 16px;
				font-weight: bold;
			}
			&VideoDirect{
				padding: 20px !important;
			}
			&VideoDirect, &PageKeyword{
				.total{
					float: left;
					width: 48%;
				}
				.select{
					float: right;
					width: 48%;
					.selectCon{
						margin-top: 42px;
					}
				}
			}
			&PageKeywordCon {
				background: white;
				border: solid 1px #ccc;
				margin: 5px 0;
				padding: 10px 20px;
				position: relative;
			}
		}
		&Footer {
			height: 60px;
			line-height: 30px;
			padding: 10px 0;
			text-align: center;
			border-top: 1px solid #DFDFDF;
			&L {
				text-align: right;
			}
			&R {
				float: right;
				width: 50%;
				text-align: left;
				border-left: 1px solid #ccc;
			}
			button {
				min-width: 80px;
			}


			&.floated {
				position: fixed;
				width: 100%;
				bottom: 0;
				left: 0;
				background: #fff;
				z-index: 100;
			}
		}

		&InputWidth {
			width: 50%;
		}
		&Box {
			//max-width: 930px;
			width: 90%;
			vertical-align: top;
			background: #FFF;
			border: 1px solid #CCC;
			padding: 10px;
			margin-top: 0px;
		}
		&CheckboxGroup {
			.content {
				width: 180px !important;
				line-height: 30px !important;
			}
		}
		&Channel {
			.channel-name {
				display: inline-block;
				width: 85px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: 0 5px;
				padding: 4px 8px;
				cursor: pointer;
			}
			.select {
				background-color: #3b9ee1;
				border-color: #3b9ee1;
				border-radius: 4px;
				color: white;
			}
		}
		&Channel.selectAdType{
			input{
				font-size: 1rem;
			}
		}
		&Addon {
			&-runing {
				.icon;
				.icon-runing;
				display:inline-block;
			}
			&-invaild {
				.icon;
				.icon-invaild;
				display:inline-block;
			}
		}
		&ProductLabel {

		}
	}

	&List{
		// 主列状态图标
		.status{
			.icon;
			display: inline-block;
			vertical-align: middle;
		}
		.status-running{
			.icon-runing;
		}
		.status-pause{
			.icon-pause;
		}
		.status-draft{
			.icon-status-draft;
		}
		.status-overBudget{
			.icon-status-overBudget;
		}
		.status-completed{
			.icon-status-completed;
		}
		.status-notStart{
			.icon-status-notStart;
		}
		.status-deleted{
			.icon-status-store;
		}
		.status-editCPA{
			.icon-status-editCPA;
			&:hover {
				.icon-act;
				.icon-act-status-editCPA;
				cursor: pointer;
			}
		}
		.status-editCPC{
			.icon-status-editCPC;
			&:hover {
				.icon-act;
				.icon-act-status-editCPC;
				cursor: pointer;
			}
		}
		.status-editCPM{
			.icon-status-editCPM;
			&:hover {
				.icon-act;
				.icon-act-status-editCPM;
				cursor: pointer;
			}
		}
		.status-editCOM{
			.icon-status-editCOM;
			&:hover {
				.icon-act;
				.icon-act-status-editCOM;
				cursor: pointer;
			}
		}
	}

	&Diagnosis {
		&Title {
			font-size: 19px;
		}
		&Name {
			font-style: normal;
		}
		&LabelsCon {
			padding: 10px 0;
			border-radius: 5px;
			background: #f8f8f8;
			.M-tagLabelsSimpleContainer {
				margin: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}

	&Code {
		padding-bottom: 10px;

		&Title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			padding: 20px 0;

			.download {
				float: right;
				margin-top: -5px;
			}
		}
		&Tip{
			text-align: left;
			.infoTitle{
				dd{
					text-indent: 2em;
				}
			}
			pre{
				-moz-tab-size: 4;
				-o-tab-size: 4;
				tab-size: 4;
				padding: 2em;
				height: 250px;
				margin: 0 0 10px;
				border-radius: 5px;
				background: #f4f4f4;
			}
			dt{
				line-height: 30px;
				margin-top: 1em;
			}
			.tipMain{
				dd{
					display: inline-block;
					width: 45%;
					vertical-align: top;
					margin: 0 2em;
				}
			}
		}

		table {
			border: solid #ccc;
			border-width: 1px 0 0 1px;
			background: #fff;
			border-spacing: 0px;
			clear: both;

			th, td {
				border: solid #ccc;
				border-width: 0 1px 1px 0;
				padding: 8px;
				line-height: 15px;
				border-bottom: 1px solid #DDD;
			}
			th {
				text-align: left;
				font-size: 16px;
				background: #e9e9e9;
				color: #333;
			}
			tr.alt td {
				background: #f9f9f9;
			}

			.id {
				width: 30px;
				text-align: center;
			}
			.name {
				width: 200px;
			}
			.url {
				word-break: break-all;
			}
			.miss {
				color: #c00;
			}
			.copy, .add {
				width: 60px;
				text-align: center;
			}
		}
	}

	&Info {
	}

	&Spot {
		&ChannelName {
			font-size: 16px;
			font-weight: bold;
			display: none;
		}
		&ChannelTips {
			color: #CE4040;
			display: none;
		}
	}

	&WebSiteClass {
		.M-commonSLC {
			width:100%;
		}
		.M-commonSLCZoneHead {
			width:150px;
			display: none;
		}
		.M-commonSLCZoneBody {
			margin-left:0px;
		}
		.M-commonSLCItem {
			width:160px;
		}
		.M-commonSLCSub {
			width: 180px;
			li {
				width: 180px;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
		.M-commonSLCItemHead {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}

	&Charge {
		.group-label {
			text-align: left;
			margin-left: 25px;
			margin-bottom: 5px;
		}
	}

	&Condition {
		// 条件组推广组的总宽度
		@total-width: 1000px;
		// 左边的宽度
		@left-width: 300px;
		// 普通标题高度
		@header-height: 35px;
		// 特殊条件的高度
		@special-condition-height: 15%;
		// 特殊条件header的宽度
		@special-condition-header-width: 90px;

		@left-header-background-color:rgb(242, 242, 242);

		@base-border: 1px solid #cccccc;

		// 条件组推广组的总宽度
		width: @total-width;
		line-height: 18px;


		// 各种基础样式
		.no-border-top {border-top: initial !important;}
		.no-border-bottom {border-bottom: initial !important;}
		.no-border-right {border-right: initial !important;}
		.valign-t {vertical-align: top !important;}

		// 标题的基础样式
		.header-base
		{
			font-size: 14px;
			line-height: 34px;
			text-indent: 8px;
			background-color: @left-header-background-color;
		}

		.edit-icon {
			cursor: pointer;
			position: relative;
			&:hover {
				&:after {
					content: ' ';
					position: absolute;
					right: 0;
					bottom: 0;
					/*border-bottom: 15px solid green;*/
					/*border-left: 15px solid transparent;*/
					width: 15px;
					height: 15px;
					background-size: 15px;
					background-image: url('../icons/edit_condition.png');
				}
			}
		}

		.status{
			.icon;
			display: inline-block;
			vertical-align: middle;
		}
		.status-running{
			.icon-runing;
		}
		.status-pause{
			.icon-pause;
		}

		.layer {
			height: 200px;
			border: @base-border;
			>div {
				height: 100%;
				float: left;
			}

			.left {
				width: @left-width;
				border-right: @base-border;
			}

			.right {
				width: @total-width - @left-width - 2px;
			}

			.header {
				.header-base;
				border-bottom: @base-border;
				height: @header-height;
			}

			.main {
				height: calc(~"100% - " @header-height);
				.edit-icon;
			}
		}

		.middle-layer{
			height: 300px;
			.middle-left {
				.condition {
					height: calc(~"100% - " @header-height ~" - " @special-condition-height);
					.edit-icon;
				}

				.special-condition{
					height: @special-condition-height;
					border-top: @base-border;

					>div {
						height: 100%;
						float: left;
					}

					.header {
						width: @special-condition-header-width;
						border-right: @base-border;
						.no-border-bottom;
						line-height: 40px;
					}

					.main {
						.edit-icon;
						width: @left-width - @special-condition-header-width - 1px;
					}
				}
			}

			.middle-subLayer {
				height: 100%;
				display: table;
				>div {
					display: table-cell;
					width: (@total-width - @left-width - 2px) / 5;
					height: 100%;
					border-right: @base-border;
				}
			}
		}

		.footer-layer {
			height: auto;
			overflow:hidden;
			.no-border-top;

			.header {
				height: 30%;
				width: @special-condition-header-width;
				border-right: @base-border;
				// 解决float的高度一致问题
				margin-bottom: -9999px;
				padding-bottom: 9999px;
				line-height: 65px;
			}

			.extra-main {
				// 附加条件设置项的单元格总宽度
				@extra-main-width: @total-width - @special-condition-header-width - 2px;

				// 附加条件的主操作列
				@item-main-width: @left-width - @special-condition-header-width;

				// 附加条件的出价预算的操作单元格宽度
				@item-common-width: (@extra-main-width - @item-main-width) / 5;

				min-height: 70px;
				width: @extra-main-width;


				.extra-item {

					border-bottom: @base-border;
					display: table;
					>div {
						display: table-cell;
						width: @item-common-width;
						height: 45px;
						border-right: @base-border;
						.edit-icon;
					}

					.item-main {
						width: @item-main-width;
					}
				}

				.addExtra {
					margin: 15px 0 15px 15px;
					.no-border-right;
				}

				.op {
					cursor: pointer;
					display: inline-block;
					color: #bbb;
					font-size: 18px;

					.opList {
					    position: absolute;
						top: 0;
						left: 20px;
						width: 50px;
						font-size: 14px;
					}
				}

			}
		}
	}

	&SubGrid {
		.planEdit{
			float: left;
			width: auto;
			padding: 10px 20px 5px;
			min-width: 160px;

			.main-icon{
				font-size:18px;
				vertical-align: middle;
				margin-right: 10px;
			}

			.title{
				font-family:"MicrosoftYaHei";
				font-size: 12px;
				color: #c6c6c6;
				margin-top: 5px;
			}
			.content{
				font-family:"MicrosoftYaHei";
				font-size: 12px;
				color: #2b2b2b;
			}

			.status{
				.icon;
					display: none;
					vertical-align: middle;
			}
			.icon-edit {
				.icon-act;
				.icon-status-editCPM;
			}

			&:hover {
				cursor: pointer;
				background-color:#f9f9f9;
				.status {
					display: block;
				}
			}
		}
	}


	&Orient {
		&Popwin {
			.group-label {
				width: auto;
			}

			.M-checkBoxGroupBody .content {
				margin: 0 5px 5px 0px;
			}

		}
		&Media {
			background: #fff;
			padding: 10px 20px;

			.conditionCon {
				margin: 10px 0px 5px 0px;
				>label {
					cursor: pointer;
					input {
						cursor: pointer;
					}
					margin-right: 20px;
				}
				>a {
					display: inline-block;
					vertical-align: middle;
					display: none;
					max-width: 600px;

					&.dib {
						display: inline-block;
					}
				}
				>span {
					vertical-align: middle;
					display: none;
				}
			}

			&Channel {
				.content {
					display: inline-block;
					width: 115px;

					label {
						line-height: 22px;
						border-radius: 4px;
						padding: 0px 4px 2px 4px;
						margin-right: 20px;
						margin-bottom: 5px;
						color: #646464;
						cursor: pointer;

						&:hover {
							color: #ffffff;
							background-color: #dcdddc;
						}

						&.select {
							color: #FFFFFF;
							background-color: #58AEDD;

							&:hover {
								color: #FFFFFF;
								background-color: #58AEDD;
							}
						}
					}
				}
			}
		}
		&Decive {
			&AppDecive {
				.M-commonSLCButtons {
					border-bottom: none;
				}
				.M-commonSLCItemHead {
					padding-top: 0px !important;

				}
			}
		}
	}
}

.P-formCountSelector{
	width: 148px;
	height: 45px;
	background: #ffffff;
	box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
	b{
		line-height: 45px;
		vertical-align: top;
		position: absolute;
		&:nth-of-type(1){
			left: 6px;
		}
		&:nth-of-type(2){
			left: 96px;
		}
	}
	.countInput{
		position: absolute;
		left: 20px;
		top: 50%;
		margin-top: -15px;
		display: block;
		width: 60px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	.btnCon{
		position: absolute;
		width: 15px;
		height: 30px;
		left: 80px;
		top: 50%;
		margin-top: -15px;

	}
	.countSelectorCtr{
		display: block;
		width: 13px;
		height: 15px;
		cursor: pointer;
		border: 1px solid #CCC;
		border-left: none;
		text-align: center;
		&:hover {
			background: #F5F5F5;
		}
	}
	.addIcon{
		i {
			vertical-align: 3px;
		}

	}
	.subIcon{
		margin-top: -1px;
		i {
			vertical-align: -1px;
		}
	}
	.edit{
		position: absolute;
		right: 11px;
		top: 50%;
		font-size: 20px;
		margin-top: -15px;
		line-height: 30px;
	}
}

.P-campaignDiagnosis{
	.dStatus{
		display: inline-block;
		position: relative;
		top: 3px;
		margin-right: 5px;
		width: 16px;
		height: 16px;
		background: #EEE url(../icons/diagnosis.png) no-repeat;
	}
	.pass{
		background-position: 0px 0px;
	}
	.part{
		background-position: -16px 0;
	}
	.shit{
		background-position: -32px 0;
	}
}

